import React, {memo} from 'react';
import RankingListStyle from "./RankingListStyle";

/**
 * 时间: 2024年1月8日 14点13分
 * 关于排行榜组件的使用
 * 这里我们依然模仿qq音乐中首页的排行榜模块
 * 这里关于封面其实我们想了一下,官方使用的是精灵图
 * 但是如果我们使用精灵图时,组件的灵活性就会大大降低
 * 所以,我们这样,如果传递给我们的有图片,就使用该图片
 * 并且将其设置为100% 100%
 * 如果没给,我们就是用QQ音乐官网的精灵图
 *
 * props说明
 *  title:排行榜名称
 *  backgroundImage:背景图片,
 *    注意:如果不传入参数,我们默认使用qq音乐官网的精灵图
 *  color:设置该盒子的全部字体颜色,默认为主题色
 *  createMusicList:Array<Object> 音乐列表
 *    注意: 这里的音乐列表有多少我们展示多少,所以就要求传递前就要处理好
 *  size: 一个盒子的宽度
 *
 *
 */
type Props = {
  title?:String,
  submitTitle?:String,
  backgroundImage?:String,
  color?:String,
  musicList?:Array<any>,
  size?:Number,
};

export default memo(function RankingList(props: Props) {
  return (
    <RankingListStyle
      $size={props.size}
      $color={props.color}
      $backgroundImage={props.backgroundImage}
    >
      <h2 className="submit-title">{props.submitTitle}</h2>
      <h1 className="title">{props.title}</h1>
      <i className="ranking-list-unhover iconfont">&#xe60a;</i>
      <i className="ranking-list-hover iconfont">&#xe624;</i>
      <ol className="ranking-list-box">
        {
          Array.from(Array(3)).map((item,index)=>{
            return (
              <li key={index}>
                <div className="music-name">ssdfsdfsdfsdfsdsdsfsdsdfsdfsdss</div>
                <div className="music-sing">G.E.M. 邓紫棋</div>
              </li>
            )
          })
        }

      </ol>
    </RankingListStyle>
  );
});
